import { defineComponent, reactive } from "vue";
import styles from "./myCase.module.less";
import {
  SearchOutlined,
  DownOutlined,
  UpOutlined,
  SwapOutlined
} from "@ant-design/icons-vue";

export default defineComponent({
  name:'userCenterMyCase',
  setup() {
    const tabs = reactive({
      list: [
        {
          key: 1,
          tab: "责任险案件",
          pane: () => <>123</>,
          // confirmHandler: (e: any) => {
          //   confirmHandler(e);
          // },
        },
        {
          key: 2,
          tab: "意外险案件",
          pane: () => <>123</>,
          // confirmHandler: (e: any) => {
          //   confirmHandler(e);
          // },
        },
        {
          key: 3,
          tab: "其他案件",
          pane: () => <>123</>,
          // confirmHandler: (e: any) => {
          //   confirmHandler(e);
          // },
        },
      ],
      activeKey: 1,
    });
    const state = reactive({
      columns: [
        {
          key: "aaa",
          dataIndex: "aaa",
          title: "出险信息"
        },
        {
          key: "bbb",
          dataIndex: "bbb",
          title: "状态",
          width: 150,
        },
        {
          key: "ccc",
          dataIndex: "ccc",
          title: "赔款（元）",
          width: 150,
        },
      ],
      data: [
        // {
        //   ccc: "10000",
        //   aaa: '撞车',
        //   bbb: "未完成"
        // },
        // {
        //   ccc: "10000",
        //   aaa: '撞人',
        //   bbb: "已完成"
        // }
      ],
      head_list: [
        {
          name: "累计报案数",
          num: 0,
          color: "#007dfc",
          bgColor: "#e5f2ff",
        },
        {
          name: "索赔中",
          num: 0,
          color: "#2da7a3",
          bgColor: "#eaf6f6",
        },
        {
          name: "已完成",
          num: 0,
          color: "#ee5316",
          bgColor: "#fdede7",
        },
        {
          name: "累计赔付金额（元）",
          num: 0,
          color: "#2c2b2b",
          bgColor: "#e9e9e9",
        },
      ],
      pane_list: [
        {
          value: 1,
          label: "报案时间",
        },
        {
          value: 2,
          label: "出险时间",
        },
      ],
      status_list: [
        {
          value: 1,
          label: "索赔中",
        },
        {
          value: 2,
          label: "已完成",
        },
      ],
      pane_content_list: [
        {
          name: "保单号:",
          placeholder: "请输入保单号",
        },
        {
          name: "报案号:",
          placeholder: "请输入报案号",
        },
        {
          name: "保险公司:",
          placeholder: "请选择保险公司",
        },
        {
          name: "被保险人:",
          placeholder: "请输入被保险人",
        },
        {
          name: "出险地:",
          placeholder: "请选择境内外",
          placeholderArea: "省级地区",
        },
      ],
      select_list: [
        {
          value: 1,
          label: "报案时间",
        },
        {
          value: 2,
          label: "更新时间",
        },
      ],
      form: {
        selectValue: 1,
        statusValue: 1,
        tableSelectValue: 1,
        timeValue: "",
      },
      paginnation: {
        total: 200,
        current: 1,
        pageSize: 20,
      },
      isPaneContract: false,
    });
    const Head_Box = () => (
      <div class={styles.headBox}>
        {state.head_list.map((item: any) => {
          return (
            <div
              class={styles["card_box"]}
              style={{ backgroundColor: item.bgColor }}
            >
              <div class={styles["card_title"]} style={{ color: item.color }}>
                {item.name}
              </div>
              <div class={styles["card_num"]} style={{ color: item.color }}>
                {item.num}
              </div>
            </div>
          );
        })}
      </div>
    );
    const Pane_Content = () => (
      <div class={styles.paneBox}>
        <div class={styles.paneHeadBox}>
          <div class={styles.head_box}>
            <a-select
              v-model:value={state.form.selectValue}
              options={state.pane_list}
              placeholder={"请选择"}
              style={{ width: "100%" }}
            ></a-select>
          </div>
          <div class={styles.context_box}>
            <a-space direction="vertical" size="12">
              <a-range-picker v-model:value={state.form.timeValue} />
            </a-space>
          </div>
          <div class={styles.bottom_box}>
            <div class={styles.pane_title_box}>索赔状态:</div>
            <div class={styles.pane_select_box}>
              {" "}
              <a-select
                v-model:value={state.form.statusValue}
                options={state.status_list}
                placeholder={"请选择"}
                style={{ width: "100%" }}
              ></a-select>
            </div>
          </div>
        </div>
        {state.isPaneContract && (
          <div class={styles.paneContentBox}>
            {state.pane_content_list.map((item: any) => {
              return (
                <div class={styles.pane_row_box}>
                  <div class={styles.pane_row_title}>{item.name}</div>
                  <div class={styles.pane_}>
                    {item.name == "保险公司:" ? (
                      <a-select
                        style={{ width: "175px" }}
                        placeholder={item.placeholder}
                      ></a-select>
                    ) : item.name == "出险地:" ? (
                      <>
                        <a-select
                          style={{ width: "150px", marginRight: "10px" }}
                          placeholder={item.placeholder}
                        ></a-select>
                        <a-select
                          style={{ width: "150px" }}
                          placeholder={item.placeholderArea}
                        ></a-select>
                      </>
                    ) : (
                      <a-input placeholder={item.placeholder}></a-input>
                    )}
                  </div>
                </div>
              );
            })}
          </div>
        )}
        <div class={styles.paneBottomBox}>
          <div class={styles.paneSearch}>
            <a-button
              type="text"
              size="middle"
              v-slots={{
                icon: () => <SearchOutlined />,
              }}
            >
              搜索
            </a-button>
          </div>
          <div class={styles.paneResetting}>
            <a-button type="text" size="middle">
              重置
            </a-button>
          </div>
          <div class={styles.paneContract}>
            <a-button
              type="text"
              size="middle"
              v-slots={{
                icon: () =>
                  state.isPaneContract ? <UpOutlined /> : <DownOutlined />,
              }}
              onClick={() => {
                state.isPaneContract = !state.isPaneContract;
              }}
            >
              {state.isPaneContract ? "收缩" : "展开"}
            </a-button>
          </div>
        </div>
        <div class={styles.paneSelectBox}>
          <a-select style={{ width: "200px" }} v-model:value={state.form.tableSelectValue} options={state.select_list}></a-select>
          <SwapOutlined style={{transform: 'rotate(90deg)',marginLeft: '5px'}}/>
        </div>
        <Table_Box />
      </div>
    );
    const Content_Box = () => (
      <div class={styles.contextBox}>
        <a-tabs
          v-model={[tabs.activeKey, "activeKey"]}
          tabBarGutter={0}
          type={"card"}
        >
          {tabs.list.map((x: any) => {
            return (
              <a-tab-pane key={x.key} tab={x.tab}>
                {<Pane_Content />}
              </a-tab-pane>
            );
          })}
        </a-tabs>
      </div>
    );
    const Table_Box = () => (
      <div class={styles.tableBox}>
        <a-table columns={state.columns} dataSource={state.data} pagination={state.paginnation}>

        </a-table>
      </div>
    )
    return () => (
      <div class={styles.myCase}>
        <Head_Box />
        <Content_Box />
      </div>
    );
  },
});
